<template>
    <div class="container sub-container">
        <system-nav name="公开党课详情" :showBack = true>
            </system-nav>
        <div class="inner">
            <!-- <Breadcrumb class="system-breadcrumb">
                <BreadcrumbItem to="/classlist">团课</BreadcrumbItem>
                <BreadcrumbItem>观看</BreadcrumbItem>
            </Breadcrumb> -->
            
            <div class="system-form system-form-large">
                <p class="class-title">{{classInfo.title}}</p>
                <div class="class-desc" v-html="classInfo.content"></div>
                 <video-player  class="video-player vjs-custom-skin"
                    ref="videoPlayer"
                    :playsinline="true"
                    :options="playerOptions"
                ></video-player>
            </div>   
            <div class="wt-footer">
           <Button type="primary" @click="goBack" ghost>返回</Button> 
            </div>
        </div>
    </div>
</template>
<script>

import { classView} from '@/common/apis/system'
import SystemNav from '@/components/SystemNav'

export default {
    name: 'watchClass',
    data(){
        return{
            classInfo:'',
            // 视频播放
            playerOptions : {
                playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                autoplay: false, //如果true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 导致视频一结束就重新开始。
                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: 'zh-CN',
                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [{
                type: "",
                src: 'http://vjs.zencdn.net/v/oceans.mp4'//url地址          
                // src: "" //url地址
                }],
                poster: "", //你的封面地址
                // width: document.documentElement.clientWidth,
                notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: true,
                    durationDisplay: true,
                    remainingTimeDisplay: false,
                    fullscreenToggle: true  //全屏按钮
                }
            }
        }
    },
    components:{SystemNav},
    mounted(){
        this.getInit()
    },
    methods:{
        getInit(){
            let _this = this
            let id = this.$route.query.id
            classView(id).then(res=>{
                console.log(res)
                if(res.data.code==200){
                    _this.playerOptions['sources'][0]['src'] = 'http://file.linhsy.com'+res.data.content.filePath;
                    _this.classInfo = res.data.content
                }
            })
        },
        // this.playerOptions['sources'][0]['src'] = '接口地址';
        goBack(){
            this.$router.push('/classlist')
        }
    }
}
</script>
<style lang='less' scoped>
.wt-footer{
    text-align:center;
    padding:10px 0 20px 0;
}
.class-title{
    height: 50px;
    line-height: 50px;
    font-weight: 500;
    font-size: 18px;
    color: #333;
    text-align: left;
    margin-top: -26px;
    border-bottom: 1px solid #ededed;
}
.class-desc{
    font-size: 12px;
    color:#999;
    margin: 8px 0 10px 0;
}
</style>